// 创建裁剪区域
// 获取裁剪区的图片
let images = $("#image");
// 设置配置项
let option = {
  // 纵横比(宽高比)
  aspectRatio: 1, // 正方形
  // 指定预览区域
  preview: ".img-preview", // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
images.cropper(option);
// 点击头像能选择图片
$("button:contains('上传')").on("click", function () {
  $("#file").trigger("click");
});
// 更换裁剪区域的图片
$("#file").on("change", function () {
  if (this.files.length > 0) {
    let fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
    images.cropper("destroy").attr("src", url).cropper(option);
  }
});
// 点击确定按钮更换头像
$("button:contains('确定')").on("click", function () {
  let canvas = images.cropper("getCroppedCanvas", { width: 30, height: 30 });
  let base64 = canvas.toDataURL();
  // 发送请求
  $.ajax({
    type: "POST",
    url: "/my/user/avatar",
    data: { avatar: base64 },
    success: function (res) {
      if (res.status === 0) {
        layer.msg(res.message);
        // 更新index.html的头像
        window.parent.fn();
      }
    },
  });
});
